<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item prop="className">
				<el-input v-model="state.queryForm.className" placeholder="班级名称"></el-input>
			</el-form-item>
			<el-form-item prop="classCode">
				<el-input v-model="state.queryForm.classCode" placeholder="班级编码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-table
			v-loading="state.dataListLoading"
			:data="state.dataList"
			border
			class="layout-table"
			show-overflow-tooltip
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="className" label="班级名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="classCode" label="班级编码" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		></el-pagination>

		<el-button type="primary" @click="handleSelect">选择</el-button>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'
import { ElMessage } from 'element-plus'
import { FormInstance } from 'element-plus'
const queryRef = ref<FormInstance>(); // 添加这行代码，声明表单引用
const state: IHooksOptions = reactive({
	dataListUrl: '/sm/class/page',
	queryForm: {
		className: '',
		classCode: ''
	}
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, reset } = useCrud(state)

// 定义选中班级的数组
const selectedClasses = ref<Array<{ id: number; className: string; classCode: string }>>([])

// 处理表格选中事件
const handleSelectionChange = (selection: any[]) => {
	selectedClasses.value = selection.map((row) => ({
		id: row.id,
		className: row.className,
		classCode: row.classCode
	}))
}

// 处理选择班级
const handleSelect = () => {
	if (selectedClasses.value.length === 0) {
		ElMessage.warning('请至少选择一个班级')
		return
	}
	emit('select-class', selectedClasses.value) // 触发选择事件
}

// 暴露选择事件
const emit = defineEmits(['select-class'])
</script>